<!--
 * @Descripttion: 图片预览组件
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-07-21 17:31:34
 * @LastEditTime: 2021-12-09 14:37:45
-->
<template>
  <div class="enclosure-img">
    <div class="flex flex-wrap">
      <div v-for="(item,index) in images" :key="index" class="small-img hand position-relative"
        :style="{'width':width,'height':height}">
        <img :src="item.url" class="width-100 height-100">
        <div v-if="item.date!='' && item.date!=undefined"
          class="add-new text-center width-100 height-100 content-fill flex flex-vertical-center flex-wrap">
          <p>补</p>
          <p>{{item.date}}</p>
        </div>
        <div class="list-cover flex flex-vertical-center">
          <Icon type="ios-eye-outline" :size="22" @click.native="preViewImgFun(index)"></Icon>
          <Icon type="ios-trash-outline" :size="22" @click.native="handleRemove(index)"
            v-if="alreayDel"></Icon>
          <Icon type="ios-trash-outline" :size="22" @click.native="handleRemove(index)" v-else
            v-show="images.length>1 && showDelete"></Icon>
        </div>
      </div>
    </div>
    <preview-image :images="preViewImg" :showDownLoad="showDownLoad" :showIndex="showIndex"
      ref="preViewImage"></preview-image>
  </div>
</template>
<script>
  export default {
    props: {
      images: {
        // 图片
        type: Array,
        default: function() {
          return []
        },
      },
      width: {
        // 小图宽
        type: String,
        default: '100px',
      },
      height: {
        // 小图宽
        type: String,
        default: '100px',
      },
      showDownLoad: {
        // 是否展示下载
        type: Boolean,
        default: true,
      },
      showDelete: {
        // 是否展示删除
        type: Boolean,
        default: true,
      },
      alreayDel: {
        // 是否一直可以删除
        type: Boolean,
        default: false,
      },
      // 定义图片归类
      type: {
        type: String,
        default: '',
      },
      attachId: {
        type: Number,
        default: null,
      },
    },
    data() {
      return {
        showIndex: 0,
        preViewImg: [],
      }
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
      preViewImgFun(index) {
        this.preViewImg = this.images.map((item) => item.url)
        this.showIndex = index
        this.$refs.preViewImage.show()
      },
      /**
       * 删除图片
       */
      handleRemove(index) {
        this.$emit('onHandleRemove', index, this.type, this.attachId)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .enclosure-img {

    // margin-top: 30px;
    .list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
      justify-content: space-around;
    }

    .small-img:hover .list-cover {
      display: flex;
    }

    .list-cover i {
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin: 0 2px;
    }

    .small-img {
      margin: 10px 20px 0 0;
      border: 1px solid #666;

      .add-new {
        p {
          font-size: 18px;
          color: #d9001b;
          width: 100%;
        }
      }
    }
  }
</style>